<template>
    <div id="subject-item-4-type13">
      <span class="index">{{subjectItemIndex + 1}}.</span>
      <input class="input" v-model="input" @input="inputEvent"/>
    </div>
</template>

<script>
export default {
  name: 'subjectItem4Type13',
  props: {
    subjectIndex: Number,
    stuAnswer: String,
    subjectItemIndex: Number
  },
  data () {
    return {
      input: null
    }
  },
  methods: {
    inputEvent (val) {
      this.$emit('subjectItemInput', val, this.subjectIndex, this.subjectItemIndex)
    }
  },
  created () {
    this.input = this.stuAnswer
  }
}
</script>

<style scoped lang="scss">
#subject-item-4-type13 {
  margin-top: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  .index {
    margin-right: 10px;
  }
  .input {
    width: 90%;
    border: none !important;
    border-bottom: 1px solid #DCDFE6 !important;
  }
}
</style>
